<template>
	<view class="login-page mh-100">
		<view class="h--status-bar-height"></view>
		<view class="login-container">
			<text class="main-color">login</text>
			<button class="btn1" type="default" @tap="setColor">修改颜色</button>
			<button class="btn2" type="default" @tap="handleSwitchTab">页面跳转</button>
      <span class="iconfont">&#xe608;</span>
      <def-button @click="handleBtnClick"></def-button>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from "vue"
	import { useThemeStore } from "@/store/theme"
	import { storeToRefs } from "pinia"
  // import { requestUserLogin } from '@/request/api/user'

	const themeStore = useThemeStore()
	const { mainColor, mainGradientColor, subGradientColor } = storeToRefs(themeStore)
	console.log(mainColor)

	const colorArr = ref([])
	const getRandomColor = () => {
		for (let i = 0; i <= 9; i++) {
			colorArr.value.push(i + '')
		}
		colorArr.value = [...colorArr.value, ...['a','b','c','d','e']]
	}
	console.log(colorArr.value);
	getRandomColor()
	const setColor = () => {
		let color = ''
		for(let i =0; i < 6; i++) {
			let str = colorArr.value[parseInt(Math.random() * 14)]
			color += str
		}
		// themeStore.setColorAction('#' + color)
    themeStore.$patch({
      mainColor: '#' + color
    })
		console.log(mainColor.value);
	}

	const handleSwitchTab = () => {
		uni.switchTab({
			url: '/pages/tabBar/home/home'
		})
	}
  const handleBtnClick = () => {
    console.log('按钮点击了');
  }
</script>

<style lang="scss" scoped>
	.login-page{
		@include flexCol;
	}
	.login-container {
		flex: 1;
    position: relative;
    background: #fff;
    .iconfont {
      color: v-bind(mainColor);
    }
    .main-color{
    	color: #fff;
    	@include posCenterXY;
    }
    .btn1 {
      background: v-bind(mainGradientColor);
    }
    .btn2 {
      background: v-bind(subGradientColor);
    }
	}
</style>
